import React from 'react';
import { useDragLayer } from 'react-dnd';
import { Card, CardMedia, Typography } from '@mui/material';

const layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
};

function getItemStyles(initialOffset, currentOffset) {
  if (!initialOffset || !currentOffset) {
    return {
      display: 'none',
    };
  }

  let { x, y } = currentOffset;

  const transform = `translate(${x}px, ${y}px)`;
  return {
    transform,
    WebkitTransform: transform,
  };
}

const CustomDragLayer = () => {
  const { itemType, isDragging, item, initialOffset, currentOffset } = useDragLayer((monitor) => ({
    item: monitor.getItem(),
    itemType: monitor.getItemType(),
    initialOffset: monitor.getInitialSourceClientOffset(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging(),
  }));

  if (!isDragging) {
    return null;
  }

  return (
    <div style={layerStyles}>
      <div style={getItemStyles(initialOffset, currentOffset)}>
        <Card sx={{ width: 100, height: 100, boxShadow: 3 }}>
          <CardMedia
            component="img"
            sx={{ height: 80, objectFit: 'cover' }}
            image={URL.createObjectURL(item.file)}
            alt={item.name}
          />
          <Typography variant="caption" noWrap>
            {item.name}
          </Typography>
        </Card>
      </div>
    </div>
  );
};

export default CustomDragLayer;